<template>
	<view class="index-box" :style="{ '--color': vuex_config.themeColor1,'--price':vuex_config.price }">

		<view class="pro_list">
			<view class="pro_list_item" v-for="(item,index) in dataList" :key='index'
				@click="$to(`/package/product/productPacjage/detail?id=${item.pk_id}`)">
				<image :src="item.logo" mode="aspectFill" class="pro_list_item_img"></image>
				<view class="pro_list_item_content">
					<view class="u-line-1  w_400 pro_list_item_content_name">{{item.name}}</view>
					<view class="u-line-1  w_400 u-m-t-13 pro_list_item_content_title ">{{item.title }}</view>
					<view class="u-flex u-m-t-10">
						<text class="pro_price">¥{{item.price || 0}}</text>
						<!-- <text class="pro_price_contrast">¥700</text> -->
					</view>
					<view class="pro_list_item_buy">
						购买
					</view>
				</view>
			</view>
		</view>
		<view class="load-more">
			<sww-load-more :params="dataListParams" @load="$loadMore"></sww-load-more>
		</view>
		<sww-login />
	</view>
</template>
<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin';
	export default {
		mixins: [pagingMixin],
		components: {

		},

		data() {
			return {

			};
		},

		methods: {
			$loadMore() {
				this._load_data()
			},
			$onReachBottom() {
				this.$loadMore();
			},
			$initPage() {
				this._init_data('GetProductPackageList')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.index-box {
		.pro_list {
			width: 100%;
			height: 100%;
			padding-bottom: env(safe-area-inset-bottom);

			.pro_list_item {
				display: flex;
				flex-direction: column;
				width: 690rpx;
				height: 510rpx;
				background: #FFFFFF;
				border-radius: 18rpx;
				margin: 40rpx auto 0;

				&:nth-of-type(1) {
					margin-top: 50rpx;
				}

				.pro_list_item_img {
					width: 100%;
					height: 329rpx;
					border-radius: 18rpx 18rpx 0 0;
				}

				.pro_list_item_content {
					position: relative;
					display: flex;
					flex-direction: column;
					flex: 1;
					padding: 35rpx 26rpx 0;

					.pro_list_item_content_name {
						font-size: 30rpx;
						font-weight: bold;
						color: #000000;
					}

					.pro_list_item_content_title {
						font-size: 20rpx;
						color: #858585;
					}

					.pro_price {
						font-size: 30rpx;
						font-weight: bold;
						color: #F24D4E;
					}

					.pro_price_contrast {
						font-size: 20rpx;
						text-decoration: line-through;
						color: #C1C1C1;
						margin-left: 7rpx;
					}

					.w_400 {
						width: 400rpx;
					}

					.pro_list_item_buy {
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						bottom: 32rpx;
						right: 26rpx;
						width: 176rpx;
						height: 58rpx;
						border: 2rpx solid #F24D4E;
						font-size: 26rpx;
						color: #F24D4E;
						border-radius: 29rpx;
					}
				}
			}
		}
	}

	.load-more {
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
